import Vue from 'vue'

const app = new Vue({
    // el: '#root',
    template: '<div ref="div">{{text}}</div>',
    data: {
        text: 'text',
        obj: {}
    },
    watch: {
        text(newText, oldText){
            console.log(`${newText} : ${oldText}`)
        }
    }
})

app.$mount("#root")

// console.log(app.$data)
// console.log(app.$props)
// console.log(app.$el) // 节点的一个引用
// console.log(app.$options)
// app.$options.render = (h) => {
//     return h('div', {}, 'new render function')
// }
// app.$data.text = 'text2'

// console.log(app.$root === app) // true
// console.log(app.$children)
// console.log(app.$slots)
// console.log(app.$scopedSlots)

// console.log(app.$refs) 快速定位到某个节点或者某个组件
// console.log(app.$isServer)

// const unWatch = app.$watch('text', (newValue, oldValue)=>{
//     console.log(newValue + '---' + oldValue)
// })

// app.$data.text = 'text2'
// unWatch()
// app.$data.text = 'text3'

// 事件监听 $once 只监听一次
// app.$on('text', (a, b)=>{
//     console.log(a, b)
// })

// app.$emit('text', 1, 2)


// 强制渲染一次

// 非data中的属性是非响应的


// app.$set(app.obj, 'a', 3)


